<template>
    <div class="modifyNicknameProfile">
        <div class="header">
            <van-nav-bar
                :title="$route.meta.title"
                left-arrow
                :right-text="$route.meta.subBtn?$route.meta.subBtn:''"
                @click-left="onClickLeft"
                @click-right="onClickRight"
            />
        </div>
        <div class="modifyNickname" v-if="$route.name=='modifyNickname'">
            <van-field v-model="nickname" placeholder="请输入昵称" clearable autofocus />
            <div class="tips">限2~12个中文、英文或数字</div>
        </div>
        <div class="modifyProfile" v-if="$route.name=='modifyProfile'">
            <van-field
                v-model="profile"
                rows="2"
                autosize
                type="textarea"
                maxlength="20"
                placeholder="请输入简介"
                clearable
                autofocus
                show-word-limit
            />
        </div>
    </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { ref } from 'vue';
import { showLoadingToast, closeToast, showToast } from 'vant';
import { modifyNickname, modifyProfile } from '@/api/user';
export default {
    name:'ModifyNicknameProfile',
    setup(props,context){
        const route = useRoute();
        const router = useRouter();
        const store = useStore();
        const token = JSON.parse(store.state.token);
        const nickname = ref(token.nickname);
        const profile = ref(token.profile);
        const onClickLeft = () => history.back();
        const onClickRight = () => {
            console.log(route.name)
            if(route.name == 'modifyNickname'){
                // 修改昵称
                let nicknameReg = new RegExp(/^[\u4e00-\u9fa5a-zA-Z0-9]{2,12}$/);
                console.log(nicknameReg.test(nickname.value))
                if(nicknameReg.test(nickname.value)){
                    // 发送请求修改昵称
                    modifyNickname({
                        id:localStorage.getItem('userId'),
                        nickname:nickname.value
                    }).then(res=>{
                        console.log(res)
                        if(res.code == '1600') {
                            token.nickname = nickname.value;
                            store.commit('SET_TOKEN',JSON.stringify(token));
                            showToast('设置成功');
                            setTimeout(() => {
                                closeToast();
                                history.back();
                            }, 1500);
                        }
                    }).catch(error=>{
                        console.log(error)
                    })
                }
                else{
                    showToast('限2~12个中文、英文或数字',{duration:1000})
                }

            }
            if(route.name == 'modifyProfile'){
                // 修改简介
                modifyProfile({
                    id:localStorage.getItem('userId'),
                    profile:profile.value
                }).then(res=>{
                    console.log(res)
                    if(res.code == '1700') {
                        token.profile = profile.value;
                        store.commit('SET_TOKEN',JSON.stringify(token));
                        showToast('设置成功');
                        setTimeout(() => {
                            closeToast();
                            history.back();
                        }, 1500);
                    }
                }).catch(error=>{
                    console.log(error)
                })
            }
        }
        return {
            nickname,
            profile,
            onClickLeft,
            onClickRight
        }
    }
}
</script>

<style>
.modifyNicknameProfile{
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    padding-top: 60px;
    background: #f5f5f5;
}
.modifyNicknameProfile .header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
.modifyNicknameProfile .van-nav-bar{height: 50px;}
.modifyNicknameProfile .van-nav-bar .van-icon{color: #000;}
.modifyNicknameProfile .van-nav-bar .van-nav-bar__arrow{font-size: 25px;}
.modifyNicknameProfile .van-nav-bar .van-nav-bar__title{
    font-size: 18px;
    font-weight: 500;
}
.modifyNicknameProfile .van-nav-bar .van-nav-bar__right span{color: #000;}
.tips{
    box-sizing: border-box;
    padding: 0 15px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #666;
    font-size: 12px;
}
</style>